<template>
    <div class="transer-container">
        <div class="upload-box">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="109px">
        <el-form-item label="图片id" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入名称图片id" :maxlength="20" show-word-limit clearable
            prefix-icon='el-icon-picture-outline' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="上传" required>
          <el-upload
           :headers="headers"
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
            :on-success="handleSuccess"
            >
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=""  class="avatar">
            </el-dialog>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
    
  </template>
  <script>
import { getToken } from '../../../utils/auth';
import { postMsgInit } from '@/utils/szptUtils/postMsgInit.js'
import { listData, getData, delData, addData, updateData,getDicts } from "@/api/system/dict/data";
import { getType,listType } from "@/api/system/dict/type";
import { getList } from '../../../api/szpt/MsgPage/ReplayMeMsg';
  export default {
    components: {},
    props: [],
    data() {
      return {
        uploadUrl: process.env.VUE_APP_BASE_API+"/szpt/file/uploadImage",
        dialogImageUrl: '',
        dialogVisible: false,
        headers:{
            Authorization:"Bearer "+getToken(),
        },
        formData: {
          mobile: '',
          picUrl:[]
        },
        rules: {
          mobile: [{
            required: true,
            message: '请输入名称图片id',
            trigger: 'blur'
          }, {
            pattern: /^[a-zA-Z0-9]+.*$/,
            message: '请输入仅包含阿拉伯数字或英文字母的id',
            trigger: 'blur'
          }],
        },
        
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        
    },
  
    methods: {
      handleRemove(file, fileList) {
        this.formData.picUrl=[]
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(_, file, fileList){
        postMsgInit(file.raw,this.formData.picUrl)
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        const form = {
            dictCode: undefined,
            dictLabel: undefined,
            dictValue: undefined,
            cssClass: undefined,
            listClass: 'default',
            dictSort: 0,
            status: "0",
            remark: undefined
        };
        const queryParams={
         pageNum: 1,
         pageSize: 10,
         dictName: undefined,
         dictType: "nav_picture_url",
         status: undefined
        }
        listType(queryParams).then(response => {
        const urlDictData = response.rows[0];
        const addDicData = {
            dictCode:undefined,
            dictType:queryParams.dictType,
            dictValue: this.formData.mobile,
            dictLabel:this.formData.mobile+"szpt_uploadTranser"+this.formData.mobile,
            cssClass: undefined,
            listClass: 'default',
            dictSort: 0,
            status: "0",
            remark:this.formData.picUrl[0].OriginUrlPass
            // remark:JSON.stringify(this.formData.picUrl[0].OriginUrlPass)
        }
        addData(addDicData).then((response) => {
            if (response.code ===200) {
                 this.$modal.msgSuccess("上传成功！");
                 this.$router.push("/system/dict")
            }else {
                this.$modal.error("上传失败！");
            }
        })

       })
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
  
  </script >
  <style lang="scss" scoped>
  .el-upload__tip {
    line-height: 1.2;
  }
  .transer-container{
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;

    .upload-box{
        width: 500px;
        height: auto;
        background-color: beige;
        padding: 20px;
        border-radius: 10px;
        overflow: hidden;
    }
  }
  </style>
  